// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 更新概览数据
    updateOverviewData();

    // 初始化图表
    initWorkloadChart();
    initDeviceStatusChart();

    // 更新实时数据表格
    updateRealtimeTable();

    // 设置定时更新
    setInterval(updateData, 30000); // 每30秒更新一次数据
});

// 更新概览数据
function updateOverviewData() {
    document.getElementById('todayWorkload').textContent = mockData.overview.todayWorkload;
    document.getElementById('onlineDevices').textContent = mockData.overview.onlineDevices;
    document.getElementById('efficiency').textContent = mockData.overview.efficiency;
    document.getElementById('safetyIndex').textContent = mockData.overview.safetyIndex;
}

// 初始化作业量趋势图表
function initWorkloadChart() {
    const chart = echarts.init(document.getElementById('workloadChart'));
    const option = {
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: mockData.workloadTrend.hours,
            axisLabel: {
                color: '#7f8c8d'
            }
        },
        yAxis: {
            type: 'value',
            name: 'TEU',
            axisLabel: {
                color: '#7f8c8d'
            }
        },
        series: [{
            data: mockData.workloadTrend.data,
            type: 'line',
            smooth: true,
            areaStyle: {
                opacity: 0.3
            },
            itemStyle: {
                color: '#1e3799'
            }
        }]
    };
    chart.setOption(option);
}

// 初始化设备状态分布图表
function initDeviceStatusChart() {
    const chart = echarts.init(document.getElementById('deviceStatusChart'));
    const option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            textStyle: {
                color: '#7f8c8d'
            }
        },
        series: [{
            type: 'pie',
            radius: '50%',
            data: mockData.deviceStatus,
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            label: {
                color: '#2c3e50'
            }
        }]
    };
    chart.setOption(option);
}

// 更新实时数据表格
function updateRealtimeTable() {
    const tbody = document.getElementById('realtimeDataBody');
    tbody.innerHTML = '';

    mockData.realtimeTasks.forEach(task => {
        const tr = document.createElement('tr');
        tr.innerHTML = `
            <td>${task.id}</td>
            <td>${task.deviceType}</td>
            <td><span class="status ${task.status}">${task.status}</span></td>
            <td>${task.startTime}</td>
            <td>${task.estimatedEndTime}</td>
            <td>
                <button class="btn-detail">详情</button>
            </td>
        `;
        tbody.appendChild(tr);
    });
}

// 更新所有数据
function updateData() {
    // 模拟数据更新
    mockData.overview.todayWorkload += Math.floor(Math.random() * 10);
    mockData.overview.onlineDevices = Math.floor(Math.random() * 5) + 25;
    mockData.overview.efficiency = Math.floor(Math.random() * 5) + 90;
    mockData.overview.safetyIndex = Math.floor(Math.random() * 3) + 95;

    // 更新显示
    updateOverviewData();
    initWorkloadChart();
    initDeviceStatusChart();
    updateRealtimeTable();
}

// 添加状态样式
const style = document.createElement('style');
style.textContent = `
    .status {
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.9em;
    }
    .status.运行中 {
        background-color: #e8f5e9;
        color: #2e7d32;
    }
    .status.待机中 {
        background-color: #fff3e0;
        color: #ef6c00;
    }
    .status.维护中 {
        background-color: #e3f2fd;
        color: #1976d2;
    }
    .status.故障 {
        background-color: #ffebee;
        color: #c62828;
    }
    .btn-detail {
        padding: 4px 8px;
        background-color: #1e3799;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s;
    }
    .btn-detail:hover {
        background-color: #0c2461;
    }
`;
document.head.appendChild(style);